<template>
  <div id="plamform-day">
    <div class="table-content scroll-box">
      <tableSearch :searchCol="searchCol">
        <Input v-model="userNo"  slot="date" />

        <div slot="button">
          <div class="actionBox">
            <div>
              <Button size='small' type="primary" @click="postClient">{{ $t('views.public.search') }}</Button>
            </div>
          </div>
        </div>
      </tableSearch>
      <tableBox :columns="titleList" :list="tablesList" :loading="false">
        <div slot="recharge_detail" slot-scope="{item}">
          <img :src="item.avatar" alt="">
        </div>

        <div slot="Controls" slot-scope="{item}">
          <div class="actionBox">
            <div>
              <Button size='small' type="primary" @click="superUser(item.user_id,2)">详情</Button>
            </div>
          </div>
        </div>


      </tableBox>

    </div>
  </div>
</template>
<script>
import tableBox from '@/components/Table/VueTable.vue';
import tableSearch from '@/components/Table/TableSearch.vue';
import selectCountryArea from '@/components/selectCountryArea/selectCountryArea.vue';
import until from '@/js/until.js';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      titleList: this.getTitleList(),
      searchCol: this.getSearchCol(),
      tablesList: [],
      pn: 1,
      page: 10,
      total: 0,
      countrySelect: 0,
      userNo:''
    };
  },
  components: {
    tableSearch,
    tableBox,
    selectCountryArea,
  },
  computed: {
    ...mapGetters([
      'getLocale',
    ]),
  },
  created() {
    this.getList();
  },
  methods: {
    getSearchCol() {
      return [
        {
          title: '用户id',
          key: 'date',
        },

      ];
    },
    getTitleList() {
      return [

        {
          title: '用户ID',
          key: 'gama_number',
        },
        {
          title: '昵称',
          key: 'nickname',
        },
        {
          title: '头像',
          key: 'recharge_detail',
          type: 'custom',
        },
        {
          title: "操作",
          key: "Controls",
          type: "custom",
        },
      ];
    },
    changeStart(data) {
      this.start_time = data
    },
    changeEnd(data) {
      this.end_time = data
    },
    postClient() {
      this.pn = 1;

      this.getList();
    },

    areaChange(data) {
      this.countrySelect = data.value;
    },
    timestampTime(data, hms) {
      return until.timestampTime(data, hms);
    },
    getList(scrollTopFlag) {
      return this.$http.userList({
        user_id:this.userNo
      }, {
        method: this.getList,
        that: this,
        scrollTopFlag,
      }).then(res => {
        this.tablesList = res.userList;

      })
    },
    superUser(id,type) {

      this.$router.push(`/userInfo/information?code=${id}`)


    },
    getTimestamp(time, type) {
      if(typeof time === 'object') return parseInt(time.getTime());
      else return parseInt(until.dataToTimestamp(time, type) / 1000);
    },
    changePage(pn) {
      this.pn = pn;
      this.getList(pn, true);
    },
    showDetail(item) {
      let routeUrl = this.$router.resolve({
          path: "/statistics-platform/giftDetail",
          query: {
            gift_id: item.id,
          },
      });
      window.open(routeUrl .href, '_blank');
    },
  },
  watch: {
    getLocale: function() {
      this.searchCol = this.getSearchCol();
      this.titleList = this.getTitleList();
    },
  },
}
</script>
<style lang="scss" scoped>
  #plamform-day {
    .recharge-detail {
      white-space: nowrap;
    }
    .search-title {
      color: red;
      display: inline-block;
    }
  }
</style>
